<template>
  <div>
    <vxe-form
      ref="xForm"
      :title-align="formData.titleAlign? formData.titleAlign : 'left'"
      :title-width="formData.titleWidth? formData.titleWidth : '100'"
      :data="formData.values"
      :rules="formData.rules"
      @submit="submitEvent"
      @reset="resetEvent"
    >
      <vxe-form-item
        v-for="(form,key) in formData.data"
        :key="key"
        :title="form.title"
        :field="form.field"
        span="24"
      >
        <template v-slot:title>
          <Row>
            <Col :span="24">
              <p>{{form.title}}</p>
              <p v-if="form.subTitle" style="color: #aaaaaa; font-size: 10px">{{form.subTitle}}</p>
            </Col>
          </Row>
        </template>
        <template v-slot:default>
          <Row>
            <Col :span="form.width">
              <template
                v-if="-1 !== inputTypes.indexOf(form.type)">
                <vxe-input
                  v-model="formData.values[form.field]"
                  :placeholder="form.placeholder"
                  clearable
                  :type="form.type === 'text' ? 'text' : form.type"
                  @input="$refs.xForm.updateStatus(scope)"
                ></vxe-input>
              </template>
              <template v-if="form.type === 'select'">
                <vxe-select
                  v-model="formData.values[form.field]"
                  :placeholder="form.placeholder"
                  @input="$refs.xForm.updateStatus(scope)"
                  clearable>
                  <vxe-option v-for="(item,key) in form.options" :key="key" :value="item.value" :label="`${item.label}`"></vxe-option>
                </vxe-select>
              </template>
              <template v-if="form.type === 'radio'">
                <vxe-radio-group
                  v-model="formData.values[form.field]"
                  @input="$refs.xForm.updateStatus(scope)"
                >
                  <vxe-radio-button
                    v-for="(name,value) in form.options"
                    :key="value"
                    :label="name"
                    :content="value"
                  ></vxe-radio-button>
                </vxe-radio-group>
              </template>
              <template v-if="form.type === 'checkbox'">
                <vxe-checkbox-group
                  v-model="formData.values[form.field]"
                  @input="$refs.xForm.updateStatus(scope)"
                >
                  <vxe-checkbox
                    v-for="(name,value) in form.options"
                    :key="value"
                    :label="name"
                    :content="value"
                  ></vxe-checkbox>
                </vxe-checkbox-group>
              </template>
              <template v-if="form.type === 'switch'">
                <vxe-switch
                  v-model="formData.values[form.field]"
                  :on-label="form.onLabel"
                  :off-label="form.offLabel"
                ></vxe-switch>
              </template>
              <template v-if="form.type === 'textarea'">
                <vxe-textarea
                  v-model="formData.values[form.field]"
                  :placeholder="form.placeholder"
                  :maxlength="form.maxlength"
                  show-word-count
                ></vxe-textarea>
              </template>
              <template v-if="form.type === 'image'">
                <div>
                  <e-image :images-list="formData.values[form.field]" @imagesChange="(images)=>{imagesChange(form.field,images)}"></e-image>
                  <input type="hidden" v-model="formData.values[form.field]">
                </div>
              </template>
            </Col>
            <Col span="1" v-if="form.info">
              <icon
                class="vxe-icon--question"
                style="margin-left: 10px; cursor: pointer"
                @click="$XModal.alert({ message: form.info, status: 'info' })"
              ></icon>
            </Col>
          </Row>
        </template>
      </vxe-form-item>
      <vxe-form-item
        :align="formData.buttonAlign ? formData.buttonAlign : ''"
        span="24"
      >
        <template v-slot>
          <div
            :style="{paddingLeft:paddingLeftWidth }"
          >
            <slot name="button"></slot>
          </div>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
import EImage from './image'
export default {
  name: 'DynamicForm',
  components: {
    EImage
  },
  props: {
    formData: {}
  },
  data () {
    return {
      paddingLeftWidth: 0,
      inputTypes: ['text', 'number', 'date', 'password', 'week', 'month', 'year', 'time', 'datetime']
    }
  },
  mounted () {
    this.paddingLeftWidth = this.formData.buttonAlign === 'left' ? (this.formData.titleWidth > 0 ? this.formData.titleWidth : '100') + 'px' : ''
    console.log(this.paddingLeftWidth)
  },
  methods: {
    imagesChange (field, images) {
      let imagesArray = []
      for (let key in images) {
        imagesArray.push({
          url: images[key].url,
          name: images[key].name
        })
      }
      this.formData.values[field] = imagesArray
    },
    submitEvent () {
      this.$emit('submitEvent')
    },
    resetEvent () {
      this.$emit('resetEvent')
    }
  }
}
</script>

<style lang="scss" scoped>

.vxe-form{
  background: none;
}
</style>
